<template>
  <div>
    <h1>2号训练室</h1>
    <div>
      <svg>
        <use xlink:href="#icon-user" />
      </svg>
      <svg>
        <use xlink:href="#icon-example" />
      </svg>
    </div>

    <hm-div
      @click="handleClick"
      @mouseenter="handleEnter"
      @mouseleave="handleLeave"
    >
      <p>123</p>
      <p>123</p>
      <p>123</p>
    </hm-div>

    <svg-icon icon-class="form" @click="iconClick" />
    <svg-icon icon-class="eye" />
  </div>
</template>

<script>
import HmDiv from './components/hm-div.vue'
export default {
  components: {
    HmDiv
  },
  methods: {
    handleClick() {
      console.log('div被点击了')
    },
    handleEnter() {
      console.log('鼠标滑入')
    },
    handleLeave() {
      console.log('鼠标滑出')
    },
    iconClick() {
      console.log('图标被点击了')
    }
  }
}
</script>

<style>

</style>
